/**
 * Icon 组件样式文件
 * 定义图标组件的样式和动画效果
 */

@import '../../styles/variables';

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  // 禁用状态
  &.icon-disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
  }

  // 尺寸定义
  &.icon-xs {
    font-size: 0.75rem;
  }

  &.icon-sm {
    font-size: 0.875rem;
  }

  // 默认大小（继承父级）
  &:not(.icon-xs):not(.icon-sm):not(.icon-lg):not(.icon-xl):not(.icon-2xl):not(.icon-3xl):not(.icon-4xl):not(.icon-5xl):not(.icon-6xl):not(.icon-7xl):not(.icon-8xl):not(.icon-9xl):not(.icon-10xl) {
    font-size: 1rem;
  }

  &.icon-lg {
    font-size: 1.125rem;
  }

  &.icon-xl {
    font-size: 1.25rem;
  }

  &.icon-2xl {
    font-size: 1.5rem;
  }

  &.icon-3xl {
    font-size: 1.875rem;
  }

  &.icon-4xl {
    font-size: 2.25rem;
  }

  &.icon-5xl {
    font-size: 3rem;
  }

  &.icon-6xl {
    font-size: 3.75rem;
  }

  &.icon-7xl {
    font-size: 4.5rem;
  }

  &.icon-8xl {
    font-size: 6rem;
  }

  &.icon-9xl {
    font-size: 8rem;
  }

  &.icon-10xl {
    font-size: 10rem;
  }

  // 悬停效果
  &:not(.icon-disabled):hover {
    opacity: 0.8;
    transform: scale(1.05);
  }

  // 激活效果
  &:not(.icon-disabled):active {
    transform: scale(0.95);
  }

  // 聚焦效果（无障碍访问）
  &:focus {
    outline: 2px solid $primary;
    outline-offset: 2px;
  }
}